<template>
	<view class="content">
		<view class="form">
			<view class="list">
				<text>手机号 :</text>
				<input type="tel" value=""  placeholder="请输入手机号" />
			</view>
			<view class="list">
				<text>验证码 :</text>
				<input type="tel" value=""  placeholder="请输入验证码" />
			</view>
			<view class="list">
				<text>密  码 :</text>
				<input type="password"  value=""  placeholder="请输入密码" />
			</view>
		</view>

		<view class="btn-row">
			<button type="primary" class="primary" @tap="findPassword">重置</button>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';
	import mInput from '../../components/m-input.vue';

	export default {
		components: {
			mInput
		},
		data() {
			return {
				email: ''
			}
		},
		methods: {
			findPassword() {
				/**
				 * 仅做示例
				 */
				if (this.email.length < 3 || !~this.email.indexOf('@')) {
					uni.showToast({
						icon: 'none',
						title: '邮箱地址不合法',
					});
					return;
				}
				uni.showToast({
					icon: 'none',
					title: '已发送重置邮件至注册邮箱，请注意查收。',
					duration: 3000
				});
			}
		}
	}
</script>

<style scoped='scoped'>
.content{background: #fff;border-top:1px solid #EEEEEE ;}
button.primary {
		width: 520upx;
		height: 72upx;
		line-height: 72upx;
		font-size: 34upx;
		background: linear-gradient(0deg, rgba(255, 26, 118, 1) 0%, rgba(255, 123, 41, 1) 100%);
		border-radius: 16upx;
	}
	.form{
		padding: 24upx;
		}
		.form .list{
			padding: 45upx 0;
			border-bottom:1px solid #EEEEEE ;
			display: flex;
		}
		.form text{
			color: #333;
			font-size: 30upx;
		}
		.form input{
			font-size: 30upx;
			margin-left: 20upx;
		}
</style>
